@import '~@wordpress/base-styles/breakpoints';
@import '~@wordpress/base-styles/mixins';

.plans-filter-bar {
	$height: 36px;
	$border-radius: 2px;

	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var( --color-surface );
	padding: 16px 0;
	border-color: var( --color-neutral-5 );
	border-style: solid;
	border-width: 1px 0;
	box-sizing: border-box;

	@include breakpoint-deprecated( '>660px' ) {
		justify-content: center;

		border-width: 1px;

		.select-dropdown {
			margin-right: 24px;
		}
	}

	.select-dropdown {
		height: $height;
		margin-left: 16px;
		margin-right: 8px;

		.select-dropdown__header {
			font-weight: 400;
			background-color: var( --color-primary );
			color: var( --color-text-inverted );
			border-color: var( --color-primary );
			border: solid 1px var( --color-neutral-10 );
			border-radius: $border-radius;
			height: $height;

			.gridicons-chevron-down {
				fill: currentColor;
			}
		}

		.select-dropdown__option,
		.select-dropdown__item {
			height: $height;
		}

		.select-dropdown__item:hover {
			color: currentColor;
			background-color: var( --studio-gray-0 );
		}

		.select-dropdown__item.is-selected {
			color: var( --color-text-inverted );
			background-color: var( --color-primary );
		}

		.select-dropdown__options {
			border-radius: 0 0 $border-radius $border-radius;
		}

		&.is-open {
			.select-dropdown__header {
				color: var( --color-neutral-70 );
				background-color: var( --studio-gray-0 );
				border-radius: $border-radius $border-radius 0 0;
			}
		}
	}

	.segmented-control {
		width: 100%;
		max-width: 180px;
		margin-left: 8px;
		margin-right: 16px;

		.segmented-control__item {
			flex: 1 1 50%;
		}
	}
}

.plans-filter-bar.sticky {
	position: fixed;

	// This is the height of the masterbar
	top: 47px;

	width: 100%;
	max-width: 1040px;

	z-index: 2;

	// At this screen size, div#content (wraps div#primary and div#secondary)
	// has a left padding of 253px and a right padding of 24px which adds up to 277px.
	@include breakpoint-deprecated( '>660px' ) {
		width: calc( 100% - 277px );
	}

	// At this screen size, div#content (wraps div#primary and div#secondary)
	// has a left padding of 305px and a right padding of 32px which adds up to 337px.
	@include break-large {
		width: calc( 100% - 337px );
	}
}

// This margin fills the gap that making the filter bar sticky leaves. Without it,
// there is a noticeable jump in the UI every time the filter bar goes from sticky
// to its normal position.
.plans-filter-bar.sticky + .plans-v2__columns {
	margin-top: 100px;

	@include breakpoint-deprecated( '>660px' ) {
		margin-top: 80px;
	}
}
